<template>
	<view class="page">
		<view class="page-ctx">

			<view class="addr-wrap">
				<view class="addr-item" @click="toChooseAddress()">
					<view class="addr-inner">
						<view class="addr-left">
							<view class="icon-box">
								<image src="@/static/payment/addr-marker.png"></image>
							</view>
							<view class="info-box" v-if="address_selected && address_selected.name">
								<view class="user-info">
									<text class="name">{{address_selected.name}}</text>
									<text class="phone">{{address_selected.phone}}</text>
									<text class="desc" v-if="address_selected.moren == 1">[默认地址]</text>
								</view>
								<view class="address-info">
									{{address_selected.areaName}}
									<view class="address-detail">
										{{address_selected.address}}
									</view>
								</view>
							</view>

							<view class="addr-empty" v-else>
								请选择收货地址
							</view>

						</view>

						<view class="addr-right flex-center">
							<image src="@/static/payment/arrow.png"></image>
						</view>
					</view>
				</view>
			</view>


			<view class="products-wrap">
				<view class="sec-title">
					商品详情
				</view>
				<view class="product-list">
					<view class="product-item flex" v-for="(item,index) in payment_products" :key="index">
						<view class="poster-box">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="title-box">
								<view class="title ellipsis-2">
									{{item.title}}
								</view>
							</view>
							<view class="guige-box">
								<view class="guige ">
									{{item.keyVals }}
								</view>
							</view>

							<view class="price-info flex-between">
								<view class="price">
									<text class="price-val">{{item.jifen || 0}}</text>
									<text class="huobi">积分</text>
								</view>
								<view class="number-box">
									<text class="num">x {{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class=" peisong-info flex-between">
					<view class="label">
						配送服务
					</view>
					<view class="value">
						快递派送
					</view>
				</view>
				<!-- <view class="remark-info flex-between" @click="openRemarkPop()">
					<view class="label">
						订单备注
					</view>
					<view class="value flex">
						<text class="text ellipsis-1">{{remark}}</text>
						<image class="arrow" src="@/static/payment/arrow.png" mode=""></image>
					</view>
				</view> -->
			</view>



			<view class="box-item box-price">
				<div class="mingxi-title">
					价格明细
				</div>

				<view class="mingxi-list">
					<view class="mingxi-item flex-between">
						<view class="label">
							商品总价
						</view>
						<view class="num">
							共{{total_product_number}}件商品
						</view>
						<view class="value">
							{{total_product_price}}积分
						</view>
					</view>

				</view>

				<view class="total-info flex-between">
					<view class="label">
						合计应付
					</view>
					<view class="value">
						{{total_order_price}} <text class="huobi">积分</text>
					</view>
				</view>
			</view>

			<view class="box-item box-pay">
				<view class="pay-info flex-between">
					<text class="label">支付方式</text>
					<text class="num">可用积分：{{my_info.jifen}}</text>
					<text class="value flex">
						<image src="@/static/points/points.png" mode=""></image>
						<text>积分支付</text>
					</text>
				</view>
			</view>

		</view>

		<w_bottom_safe height="140" />

		<view class="page-foot">
			<view class="safe-fixed-bottom">
				<view class="btns">
					<button class="btn flex-center" :disabled="false" @click="toOrderSubmit()">
						立即兑换
					</button>
				</view>
			</view>
		</view>


		<order_remark_pop ref="order_remark_pop" @confirm="confirmRemark" />

	</view>
</template>

<script>
	import dayjs from 'dayjs';

	import order_remark_pop from '@/components/order/order_remark_pop.vue'


	export default {
		components: {
			order_remark_pop,

		},
		data() {
			return {
				is_test_pay_order: false, //测试假支付

				from: '', //product-detail  ||  cart
				inventoryId: '',
				buyNumber: '',
				//
				address_selected: {}, //地址
				pagination_address: {
					page: 1,
					pageNum: 20
				},
				remark: '',
				//
				payment_products: [],
				total_product_number: 0,
				total_product_price: 0, //商品总金额
				total_order_price: 0, //订单总金额
				//

				my_info: {
					jifen: 0
				}, //我的信息 包含 余额 佣金数值
				is_allow_pay: false, //是否允许兑换支付  积分不足不允许
			}
		},
		onLoad(option) {
			this.from = option.from || '';	
			this.getCacheProduct();
		},
		onShow() {
			this.query_user();
			this.query_address();
		},
		onHide() {},

		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			//下单成功后 移除商品信息
			clearCacheProduct() {
				uni.removeStorageSync('payment_points_products')
			},
			//
			getCacheProduct() {
				//本地产品数据
				let cache_payment_products = uni.getStorageSync('cache_payment_points_products');
				if (cache_payment_products) {
					this.payment_products = JSON.parse(cache_payment_products)

					let total_product_number = 0;
					let total_product_price = 0;
					this.payment_products.forEach(v => {
						total_product_number += parseInt(v.num)
						total_product_price += v.jifen * v.num;
						
						
						this.inventoryId = v.inventoryId;
						this.buyNumber = v.num;
					})
					this.total_product_number = total_product_number;
					this.total_product_price = (total_product_price).toFixed(2);
					this.total_order_price = this.total_product_price;
					this.$log('缓存 待下单产品', this.payment_products)
				} else {

				}
			},



			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					if (res.code == 200) {
						this.my_info = res.data;
						this.is_allow_pay = res.data.jifen >= this.total_order_price;
					}
				})
			},

			query_address() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'userAddress_lists',
						...this.pagination_address,
						// shop_id: this.id,
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data
						let cache_payment_address_id = uni.getStorageSync('cache_payment_address_id');
						console.log('缓存的地址id  cache_payment_address_id', cache_payment_address_id)
						let cache_index = data.findIndex(v => v.id == cache_payment_address_id);
						let default_index = data.findIndex(v => v.moren == 1);

						if (cache_index > -1) {
							this.address_selected = data[cache_index]
						} else {
							uni.removeStorageSync('cache_payment_address_id')
							if (default_index > -1) {
								this.address_selected = data[default_index]
							} else {
								this.address_selected = {}
							}
						}

					}
					this.hideLoading()
				})
			},

			//选择地址
			toChooseAddress() {
				this.toRoute({
					path: '/address-list',
					query: {
						from: 'order'
					}
				})
			},

			//订单备注
			openRemarkPop() {
				this.$refs.order_remark_pop.init()
			},
			confirmRemark(value) {
				this.$log('订单备注', value)
				this.remark = value
			},

			openCouponPop() {
				this.$refs.order_choose_coupon_pop.init(this.coupons_for_allow_use)
			},
			confirmCoupon(item) {
				this.$log('订单选择优惠券', item)
				this.coupon_selected = item;

			},

			fapiaoConfirm(e) {
				console.log(JSON.stringify(e))
				console.log(e)
			},


			toOrderSubmit() {
				if (!this.address_selected.id) {
					this.$alert('请选择收货地址')
					return
				}

				if (parseFloat(this.my_info.jifen) < this.total_order_price) {
					this.$alert('您的可用积分不足，无法兑换')
					return
				}

				// let _room_info = this.vuex_select_room;
				this.mix_throttle(this.doOrderSubmitFn);
				// this.doOrderSubmitFn()
			},


			doOrderSubmitFn() {
				this.showLoading({
					title: '订单提交中',
					disClose: true
				});


				// return
				// 【积分兑换】
				let item = this.payment_products[0]
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'jiFen_order',
						inventoryId: this.inventoryId,
						num: this.buyNumber,
						addressId: this.address_selected.id,
					},
				}).then(res => {
					if (res.code == 200) {
						this.order_id = res.data.id;
						this.toPaySuccess()
						this.clearCacheProduct()
					} else {
						this.$alert(res)
					}

					this.hideLoading()
				})
			},


			toPaySuccess() {
				this.toPayResult(1)
			},
			toPayFail() {
				this.toPayResult(0)
			},

			//
			toPayResult(is_pay = 0) {
				this.toRoute({
					path: '/points-success',
					query: {
						order_id: this.order_id,
						type: 'points',
						is_pay: is_pay,
					},
					// mode: 'redirectTo'
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
</style>

<style lang="scss" scoped>
	.page {}

	.page-ctx {
		padding: 24rpx 32rpx;
	}


	.box-item {
		margin-bottom: 24rpx;
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}




	.addr-wrap {
		margin-bottom: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.addr-item {
			padding: 24rpx 0 0;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.addr-inner {
			margin: 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 36rpx;

			.addr-left {
				display: flex;
				align-items: center;
				flex: 1;
				overflow: hidden;
				padding-right: 20rpx;

				.icon-box {
					padding: 24rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.ico-dai {
					padding: 24rpx;


					.xing {
						width: 56rpx;
						height: 56rpx;
						background: #4D9EFA;
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;

						text-align: center;
						border-radius: 50%;
					}
				}

				.user-info {
					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #000000;
						margin-right: 24rpx;
					}

					.phone {
						font-size: 28rpx;
						color: #333333;
						margin-right: 32rpx;
					}

					.desc {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #CB0011;
					}
				}

				.address-info {
					font-size: 24rpx;
					margin-right: 0;
					margin-top: 12rpx;

					view {
						margin-top: 6rpx;
					}
				}

				.addr-empty {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.addr-right {
				align-self: stretch;
				width: 72rpx;


				image {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
	}

	.products-wrap {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.sec-title {
			margin-bottom: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.product-list {
			.product-item {
				padding: 16rpx 0;

				&+.product-item {
					border-top: 1rpx solid #eee;
				}

				.poster-box {
					width: 176rpx;
					height: 176rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 176rpx;
						height: 176rpx;
					}
				}

				.info {
					flex: 1;
					overflow: hidden;
					padding-left: 20rpx;
					// width: calc(100% - 140rpx);

					.title-box {
						height: 80rpx;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
						line-height: 1.5;
					}


					.guige-box {
						height: 30rpx;
						margin-top: 12rpx;
					}

					.guige {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}

					.price-info {
						margin-top: 12rpx;

						.price {
							.huobi {
								font-family: PingFang SC, PingFang SC;
								font-weight: 800;
								font-size: 20rpx;
								color: #000000;
							}

							.price-val {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
							}
						}

						.number-box {
							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
							}
						}
					}
				}
			}
		}
	}


	.peisong-info {
		padding: 15rpx 0;

		.label {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #222222;
		}

		.value {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}
	}

	.remark-info {
		padding: 15rpx 0;

		.label {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #222222;
		}

		.value {
			flex: 1;
			overflow: hidden;

			.text {
				flex: 1;
				padding-left: 80rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}

			.arrow {
				margin-left: 20rpx;
				width: 14rpx;
				height: 24rpx;
			}
		}
	}



	.box-user {
		margin-top: 24rpx;

		.user-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.input-items {
			margin-top: 34rpx;

			.input-item {
				margin-bottom: 16rpx;

				input {
					padding: 0 24rpx;
					height: 72rpx;
					line-height: 72rpx;
					background: #F8F8F8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000;
				}

				.input-p {
					background: #F8F8F8;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #777;
				}
			}
		}



	}




	.box-price {
		margin-top: 24rpx;

		.mingxi-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.mingxi-list {}

		.mingxi-item {
			margin-top: 20rpx;


			.label {
				margin-right: 20rpx;
				// width: 160rpx;
				min-width: 160rpx;
				min-width: 5em;

				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}

			.num {
				flex: 1;
				text-align: left;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #B3B9C9;
			}

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;

				.value-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #222222;
				}

				.arrow {
					margin-left: 20rpx;
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.total-info {
			border-top: 1rpx solid #F8F8F8;
			margin-top: 32rpx;
			padding-top: 32rpx;

			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #222222;
			}

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}
		}

	}




	.box-pay {
		padding: 24rpx 24rpx;

		.pay-info {
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}


			.num {
				padding-left: 40rpx;
				flex: 1;
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
			}

			.value {

				image {
					margin-right: 24rpx;
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

				.value-1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

				.arrow-box {
					height: 40rpx;
				}

				.arrow {
					margin-right: 0;
					margin-left: 24rpx;
					width: 14rpx;
					height: 24rpx;
				}

			}
		}
	}





	.page-foot {
		.btns {
			width: 100%;
		}

		.btn {
			width: 100%;
			height: 80rpx;
			background: #CB0011;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			&.btn-disabled {
				background: #DDDDDD;
			}

			&[disabled] {
				background: #DDDDDD;
			}
		}
	}
</style>